<template>
  <!-- 运输管理筛选 -->
  <div>
    <van-popup v-model="isShow" position="right" @click-overlay="close" :style="{ width: '80%',height: '100%'}">
      <div class="top">
        <header>{{$t('m.screen')}}</header>
      </div>
      <div class="content">
        <div class="content-text">
          <el-form label-position="top" label-width="80px" :model="formLabelAlign" size="mini">
            <el-form-item :label="$t('cTransportSearch.carDate')">
              <el-button type="primary" round plain @click="handleStartDate">{{formLabelAlign.startDate.length === 5 ? 'Start':formLabelAlign.startDate}}</el-button>
              <span style="padding: 0 2.778vw">~</span>
              <el-button type="warning" round plain @click="handleEndDate">{{formLabelAlign.endDate.length === 3 ? 'End':formLabelAlign.endDate}}</el-button>
            </el-form-item>
            <el-form-item :label="$t('cTransportSearch.documentNum')">
              <el-input v-model="formLabelAlign.documentNum"></el-input>
            </el-form-item>
            <el-form-item :label="$t('cTransportSearch.applyBatch')">
              <el-input v-model="formLabelAlign.applyBatch"></el-input>
            </el-form-item>
            <el-form-item :label="$t('cTransportSearch.transportState')">
              <el-select v-model="formLabelAlign.transportState" :placeholder="$t('m.choose')">
                 <el-option v-for="item in states" :key="item.id" :label="$t(item.name)" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cArroval.aog')">
              <el-select v-model="formLabelAlign.aog" :placeholder="$t('m.choose')">
                 <el-option :label="$t('m.all')" :value="-1"></el-option>
                 <el-option :label="$t('m.itemName')" :value="0"></el-option>
                 <el-option :label="$t('m.aog')" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('cTransportSearch.carrier')">
              <el-input v-model="formLabelAlign.carrier"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom">
        <div>
          <el-button plain @click="close(1)">{{$t('btn.reset')}}</el-button>
          <el-button type="primary" @click="handleOk">{{$t('btn.ok')}}</el-button>
        </div>
      </div>
    </van-popup>
    <!-- 日期选择器 -->
    <div class="time" v-if="dateShow">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          :title="$t('m.chooseDate')"
          @confirm="confirm"
          @cancel="cancel"
      />
    </div>
  </div>
</template>

<script>
import { format,managementState,getToday } from "@/assets/js/common";
export default {
  // 组件属性、变量
  props: {
    show: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  // 变量
  data() {
    return {
      dateShow: false, // 控制日期选择器显示
      currentDate: new Date(),
      timeTile: '', // 当前选择日期的名字
      formLabelAlign: {
        startDate: 'Start',
        endDate: 'End',
        aog: -1,
        transportState: -2
      },
      showChecked: false,
      showState: false,
      states: managementState
    }
  },
  computed: {
    isShow: {
      get () {
        return this.show
      },
      set () {}
    }
  },
  // 使用其他组件
  components: {},
  // 方法
  methods: {
    // 关闭
    close(value) {
      if(value === 1) this.formLabelAlign = this.$options.data().formLabelAlign
      this.$emit('handleClose', value ,this.formLabelAlign)
    },
    // 确定
    handleOk() {
      const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
      if(obj.startDate && obj.startDate.length !== 5) {
        obj.startDate = obj.startDate + ' 00:00:00'
      }
      if(obj.endDate && obj.endDate.length !== 3) {
        obj.endDate = obj.endDate + ' 23:59:59'
      }
      this.$emit('handleSearch', obj)
      this.close()
    },
    handleStartDate() {
      this.dateShow = true
      this.timeTile = 'Start Date'
      if (this.formLabelAlign.startDate && this.formLabelAlign.startDate !== 'Start') {
        this.currentDate = new Date(this.formLabelAlign.startDate)
      } else {
        this.currentDate = new Date()
      }
    },
    handleEndDate() {
      this.dateShow = true
      this.timeTile = 'End Date'
      if (this.formLabelAlign.endDate && this.formLabelAlign.endDate !== 'End') {
        this.currentDate = new Date(this.formLabelAlign.endDate)
      } else {
        this.currentDate = new Date()
      }
    },
    confirm() {
      if (this.timeTile === 'Start Date') {
        this.formLabelAlign.startDate = format(this.currentDate)
      }
      else {
        this.formLabelAlign.endDate = format(this.currentDate)
      }
      this.dateShow = false
    },
    cancel() {
      this.dateShow = false
    }
  },
  // 生命周期函数
  created() {
    const dayArr = getToday()
    this.formLabelAlign.startDate = dayArr[0]
    this.formLabelAlign.endDate = dayArr[1]
  }
}
</script>

<style scoped src="@/assets/css/transport/choose.css">

</style>
